<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>

      <el-steps :active="active" style="margin: 40px">
        <el-step title="填写借款人信息"></el-step>
        <el-step title="提交平台审核"></el-step>
        <el-step title="等待认证结果"></el-step>
      </el-steps>

      <div v-if="active === 0" class="user-borrower">
        <h6>个人基本信息</h6>
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <el-col :span="5">
              <el-input v-model="borrower.age" />
            </el-col>
          </el-form-item>

          <el-form-item label="性别">
            <el-select v-model="borrower.sex">
              <el-option :value="1" :label="'男'" />
              <el-option :value="0" :label="'女'" />
            </el-select>
          </el-form-item>
          <el-form-item label="婚否">
            <el-select v-model="borrower.marry">
              <el-option :value="true" :label="'是'" />
              <el-option :value="false" :label="'否'" />
            </el-select>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="borrower.education">
              <el-option
                v-for="item in educationList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="行业">
            <el-select v-model="borrower.industry">
              <el-option
                v-for="item in industryList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="月收入">
            <el-select v-model="borrower.income">
              <el-option
                v-for="item in incomeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="还款来源">
            <el-select v-model="borrower.returnSource">
              <el-option
                v-for="item in returnSourceList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>联系人信息</h6>
        <el-form label-width="120px">
          <el-form-item label="联系人姓名">
            <el-col :span="5">
              <el-input v-model="borrower.contactsName" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-col :span="5">
              <el-input v-model="borrower.contactsMobile" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人关系">
            <el-select v-model="borrower.contactsRelation">
              <el-option
                v-for="item in contactsRelationList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>身份认证信息</h6>
        <el-form label-width="120px">
          <el-form-item label="身份证正面照">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :data="{ module: 'idcard' }"
              :show-file-list="false"
              :on-success="handleIdcard1Success"
            >
              <img
                v-if="borrower.idcard1Url"
                :src="borrower.idcard1Url"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form label-width="120px">
          <el-form-item label="身份证国徽照">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :data="{ module: 'idcard' }"
              :show-file-list="false"
              :on-success="handleIdcard2Success"
            >
              <img
                v-if="borrower.idcard2Url"
                :src="borrower.idcard2Url"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <h6>其他信息</h6>
        <el-form label-width="120px">
          <el-form-item label="房产信息">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :data="{ module: 'house' }"
              :show-file-list="false"
              :on-success="handleHouseSuccess"
            >
              <img
                v-if="borrower.houseUrl"
                :src="borrower.houseUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form label-width="120px">
          <el-form-item label="车辆信息">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :data="{ module: 'car' }"
              :show-file-list="false"
              :on-success="handleCarSuccess"
            >
              <img
                v-if="borrower.carUrl"
                :src="borrower.carUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form label-width="120px">
          <el-form-item>
            <el-button
              type="primary"
              :disabled="submitBtnDisabled"
              @click="save"
            >
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-else-if="active === 1">
        <div style="margin-top:40px;">
          <el-alert
            title="您的认证申请已成功提交，请耐心等待"
            type="warning"
            show-icon
            :closable="false"
          >
            我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
          </el-alert>
        </div>
      </div>

      <div v-else-if="active === 2">
        <div style="margin-top:40px;">
          <el-alert
            v-if="borrowerStatus === 2"
            title="您的认证审批已通过"
            type="success"
            show-icon
            :closable="false"
          >
            <el-button type="success" size="mini" @click="handleApply"
              >立即借款</el-button
            >
          </el-alert>

          <el-alert
            v-if="borrowerStatus === -1"
            title="您的认证审批未通过"
            type="error"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uploadUrl: "http://192.168.1.170/admin/oss/upload",
      borrower: {
        idcard1Url: "",
        idcard2Url: "",
        houseUrl: "",
        carUrl: "",
      },
      educationList: [], //学历集合
      industryList: [], //行业集合
      incomeList: [], //收入集合
      returnSourceList: [], //还款来源
      contactsRelationList: [], //联系人关系集合
      submitBtnDisabled: false,
      active: null,
      borrowerStatus: 0,
    };
  },
  created() {},
  mounted() {
    this.getBorrowerStatus();
  },
  methods: {
    handleApply() {
      this.$router.push("/user/apply");
    },
    getBorrowerStatus() {
      let josnStr = localStorage.getItem("userInfo");
      let token;
      if (josnStr) {
        token = JSON.parse(josnStr).token;
      }
      this.$axios({
        url: "/api/core/borrower/auth/borrowerStatus",
        method: "GET",
        headers: { token },
      }).then((r) => {
        this.borrowerStatus = r.data.data.status;
        //根据status的值切换显示页面中的不同的步骤
        if (this.borrowerStatus === 0) {
          this.getDicts();
          this.active = 0;
        } else if (this.borrowerStatus === 1) {
          this.active = 1;
        } else {
          this.active = 2;
        }
      });
    },
    handleIdcard1Success(res) {
      //身份证正面上传成功的回调
      console.log(res);
      this.borrower.idcard1Url = res.data.path;
    },
    handleIdcard2Success(res) {
      //身份证反面上传成功的回调
      console.log(res);
      this.borrower.idcard2Url = res.data.path;
    },
    handleHouseSuccess(res) {
      //房产信息上传成功的回调
      console.log(res);
      this.borrower.houseUrl = res.data.path;
    },
    handleCarSuccess(res) {
      //车辆信息上传成功的回调
      console.log(res);
      this.borrower.carUrl = res.data.path;
    },
    //根据dictCode查询数据字典集合
    getDicts() {
      this.$axios({
        url: `/api/core/dict/dicts/education`,
        method: "GET",
      }).then((r) => {
        this.educationList = r.data.data.items;
      });
      this.$axios({
        url: `/api/core/dict/dicts/industry`,
        method: "GET",
      }).then((r) => {
        this.industryList = r.data.data.items;
      });
      this.$axios({
        url: `/api/core/dict/dicts/income`,
        method: "GET",
      }).then((r) => {
        this.incomeList = r.data.data.items;
      });
      this.$axios({
        url: `/api/core/dict/dicts/returnSource`,
        method: "GET",
      }).then((r) => {
        this.returnSourceList = r.data.data.items;
      });
      this.$axios({
        url: `/api/core/dict/dicts/relation`,
        method: "GET",
      }).then((r) => {
        this.contactsRelationList = r.data.data.items;
      });
    },
    save() {
      // this.active = 1;
      this.submitBtnDisabled = true; //防止表单重复提交 设置提交按钮禁用
      let josnStr = localStorage.getItem("userInfo");
      let token;
      if (josnStr) {
        token = JSON.parse(josnStr).token;
      }
      //提交保存借款人认证信息请求
      this.$axios({
        url: "/api/core/borrower/auth/saveBorrower",
        method: "POST",
        data: this.borrower,
        headers: { token },
      }).then((r) => {
        //切换到下一步
        this.active = 1;
        this.$message.success("借款人信息提交成功");
      });
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 220px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 220px;
  height: 178px;
  display: block;
}
</style>
